import React, { useState, useEffect, useCallback } from 'react'//请求的数据异步，请求回来得刷新组件
import { AudioOutlined, DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';//引入右侧图标的样式
import { Popconfirm, message, Space, Table, Input, Col, Row, Button, } from 'antd';//引入的表格的样式
//import {DeleteOutlined} from '@ant-design/icons'//引入下图标的样式
import { useNavigate, useSearchParams } from 'react-router-dom' //添加路由    点击添加的时候跳转到添加页面
import request from '../../../utils/request';//请求数据回来渲染到我们的table之中
import Edit from './Edit';



const List = () => {
    const [urlParams, setUrlParams] = useSearchParams()
    const [datalist, setDatalist] = useState([]);
    const [params, setParams] = useState({
        //解决数据类型引起的问题
        page: Number(urlParams.get('page')) || 1,//设置我们的刷新的时候出现的页面
        size: Number(urlParams.get('size')) || 10,//一个页面可以出现多少条数据
    })//分页 
    const [total, setTotal] = useState(0) //分页总数

    const [selectIds, setSelectIds] = useState([])
    const navigate = useNavigate();
    //用户操作的部分增删改CRud
    const removeItem = useCallback(async (id) => {
        const { data } = await request.delete('/user/' + id)
        console.log('user_data', data);
        if (data.status === 200) {
            message.success('数据删除成功')

            getData()
        }
    }, [])

    const removeItems = useCallback(async () => {
        if (selectIds.length === 0) {
            return message.warning('请选择删除的数据');
        }
        const { data } = await request.delete('/user', {

            data: {
                ids: selectIds
            }
        })

        if (data.status === 200) {
            message.success('数据删除成功')
            getData()
        }
    }, [selectIds])



    const addItem = useCallback(() => {
        navigate('/manage/user/add')
    }, [])
    const editItem = (id) => {
        navigate('/manage/user/' + id)
    };
    const { Search } = Input;

    const onSearch = (value) => console.log(value);


    // 这里设置每一列，然后dataIndex一一对应请求回来的数据的名字
    const columns = [
        {
            title: '#',
            dataIndex: '_id',
            width: 80,//第一个占据的大小为80px
            //自定义单元格
            render(text, record, index) {
                return index + 1
            }
        },
        {
            title: '用户名称',
            //dataIndex:'userid',
            dataIndex: 'username',

        },
        {
            title: '用户类型',
            dataIndex: 'type',

        },
        {
            title: '注册/修改时间',
            dataIndex: 'regtime',

        },
        {
            title: '操作',
            dataIndex: '_id',
            width: 120,
            render(id) {
                return (
                    //react fragment的简写
                    <Space>
                        <Button type='primary' ghost icon={< FormOutlined />} size='small'
                            onClick={editItem.bind(null, id)}></Button>
                        <Popconfirm
                            title="确定删除这条数据吗?"
                            onConfirm={removeItem.bind(null, id)}
                        // onCancel={cancel}
                        // okText="Yes"
                        // cancelText="No"
                        >
                            <Button danger icon={<DeleteOutlined />} size='small'></Button>
                        </Popconfirm>
                    </Space>

                )
            }

        },

    ]
    const rowSelection = {
        //通过我们的id来将数据返回删除掉   选中之后才会拿到数据  然后将选中的数据删除掉
        onChange(selectedRowKeys) {
            console.log('selectedRowKeys=', selectedRowKeys);
            setSelectIds(selectedRowKeys)
        }
    };//单选全选框
    // 这里请求数据回来输入到我们的列表之中
    // const [datalist,setDatalist] = useState([]);
    // {
    //     id: '1',
    //     type: '多',
    // }
    //用到数据我们的数据就不能写死


    //请求数据
    const pagination = {
        total,
        //页码每页的个数  我们的个数都不会发生改变
        current: params.page,
        pageSize: params.size,
        size: 'small',
        //当页码发生改变的时候我们的页面的数据发生改变
        onChange(page, size) {
            setParams({
                page,
                size
            })
            setUrlParams({
                page,
                size
            })
        }
    }

    const getData = async () => {
        const { data } = await request.get('/user', {
            //请求里面的参数
            params
        })
        console.log('user_add所有的数据:', data);//查看返回的数据确定的是什么数据一开始返回的是一个空数组
        if (data.status === 200) {

            setDatalist(data.data.result);
            setTotal(data.data.total)

        }

    }
    //当数据刷新的时候我们的会再次请求数据
    useEffect(() => {
        getData()
    }, [params])

    return (

        <div className='t-search'>

            <Search
                placeholder="输入关键字查找面试题"// onSearch={onSearch}
            />
            <Row gutter={20}>
                <Col span={8}>
                    <Button type='primary' icon={<PlusOutlined />} onClick={
                        //添加一个点击跳转的页面
                        addItem
                    }>添加</Button>
                    {/* 点击添加按钮的时候跳转到添加页面 */}
                </Col>
                <Col span={16} className='text-right'>{/* 让批量删除到右侧 */}
                    {/* 按钮绑定事件 */}
                    <Popconfirm
                        title="确定删除这条数据吗?"
                        onConfirm={removeItems}
                    >
                        <Button danger icon={<DeleteOutlined />} >批量删除</Button>

                    </Popconfirm>
                </Col>
            </Row>
            <Table
                rowKey="_id"
                rowSelection={rowSelection}
                columns={columns}
                dataSource={datalist}
                pagination={pagination}
            />

        </div >


    )

}

export default List;